<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="reply pd-30">
			<!-- user -->
			<view class="user1 flex pd-20 bd-r40">
				<view class="img">
					<image class="wh-100  bd-r40" :src="details?.user_info?.avatar"></image>
					<image class="wh-28 mr-12" v-if="details.user_info?.sale_info?.is_official" style="
		              border-radius: 50%;
		              position: absolute;
		              right: -15rpx;
		              bottom: 0;
		              z-index: 3;
		            " src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
				</view>
				<view class="right ml-20">
					<view class="flex-bwt">
						<view class="te-wid width flex">

							<span class="ft1 te-2">{{ details?.user_info?.nickname }}</span>
							<text class="nameTitle ml-8" v-if="details.user_info?.sale_id > 0">认证老师</text>

						</view>

						<view class="positionBox">
							<image @click="isMore = !isMore" style="
		            z-index: 1;
		            width: 74rpx;
		            height: 42rpx;" src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
							<view v-if="isMore" class="box pd-20">
								<view v-if="details.is_my === 0" class="ft c-33 flex-center"
									@click="goReport(details.id, 'answer_id')">举报
								</view>
								<view v-else class="ft c-33  flex-center" @click="deleteFun(details.id, 'answer')">删除
								</view>
							</view>
						</view>
					</view>

					<view class="ft ft-20 c-99">{{
						details.ip_location + " | " + details.created_at }}</view>

					<view class="te-2 fw-400 ft-24 c-66  mt-10">{{ details.content }}</view>

				</view>
			</view>

			<view class="user2 bd-r40 mt-30 flex" v-if="details.like_list?.length">
				<!-- <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">

					<view class="flex">
						<image v-for="item in details.like_list" class="flex img_log bd-r50c" :src="item?.avatar"
							:key="item.user_id">
						</image>
					</view>
				</scroll-view> -->

				<avtorGroup v-if="details.like_list.length > 0" :avatars="details.like_list.map(f => f.avatar)" size="68">
				</avtorGroup>
				<view class="likeNum_list flex-center ft-24 c-66">{{ details.like_num }}人点赞了</view>
			</view>
			<!-- 列表 -->
			<view class="listBox mt-30 bd-r40">
				<text class="ml-30  ft-24 c-99">{{ datas.length }}条问答评论</text>
				<template v-for="list in datas" :key="list.id">

					<view class="card1 pd-12">
						<view class="mt-24 flex-bwt1">
							<view class="identity flex">
								<view style="position: relative">
									<image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1"
										:src="list.user_info.avatar">
									</image>
									<image class="wh-28 mr-12"
										v-if="list?.user_info?.sale_info && list?.user_info?.sale_info?.is_official === 1"
										style="
		                border-radius: 50%;
		                position: absolute;
		                right: 0;
		                bottom: 0;
		                z-index: 3;
		              " src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
								</view>
								<view class="desc ml-20">
									<view class="ft1 flex">{{ list.user_info.nickname }}

										<text class="nameTitle ml-8" v-if="list.user_info?.sale_id > 0">认证老师</text>
									</view>
									<view class="ft mt-12 ft-20 c-99">{{
										list.ip_location + " | " + list.created_at
									}}</view>
								</view>
							</view>
							<view class="positionBox">

								<image @click="list.isMore = !list.isMore" style="
		              z-index: 1;
		              width: 74rpx;
		              height: 42rpx;
		              margin-bottom: 30rpx;
		            " src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
								<view v-if="list.isMore" class="box pd-20">
									<view v-if="list.is_my === 0" class="ft c-33 flex-center"
										@click="changeIsMore(list.id, 'reply_id')">
										举报
									</view>
									<view v-else class="ft c-33  flex-center" @click="deleteFun(list.id)">删除</view>
								</view>
							</view>

						</view>

						<view class="ft mt-12 ml-102">{{ list.name }}</view>
						<view class="flex ml-102 mt-20" @click="handleZan(list.id, list.is_like, list)">
							<image v-if="list.is_like === 1" class="wh-24 mr-12"
								src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png">
							</image>
							<image v-if="list.is_like === 0" class="wh-24 mr-12"
								src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
							<text class="ft">{{ list.like_num }}</text>
						</view>
					</view>
				</template>
			</view>

		</view>
		<!-- 删除提示 -->
		<up-modal width="518rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="show"
			:title="title" :showCancelButton="true" :content="content"></up-modal>
		<!-- 举报 -->
		<comReportPopup :showReport="showReport" :reportType="reportType" :reportId="reportId"
			@closeReport="closeReport" v-if="showReport">
		</comReportPopup>
		<!-- 回答 -->
		<comAnswerPop :show="showpop" @close="close" @onReplay="onReplay" :replysName="placeholderText"></comAnswerPop>

		<view class="bottomCard">
			<view class="comments flex" style="padding-left: 30rpx">
				<view class="input mt-12" style="padding-left: 8rpx" @tap="change">
					<!-- <up-input ref="inputRef" :placeholder="replysName" border="none" v-model="value1"
						@confirm="onReplay" @change="change"></up-input> -->
					<text>{{ replysName }}</text>
				</view>
				<view class="zan ml-40 flex-c-center" @click="handleZan1(details.id, details.is_like, details)">
					<image v-if="details.is_like === 0" class="wh-32"
						src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
					<image v-if="details.is_like === 1" class="wh-32"
						src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png">
					</image>
					<view class="ft">点赞</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import {
	onLoad
} from "@dcloudio/uni-app";
import comReportPopup from '@/components/comReportPopup.vue'
import comAnswerPop from "@/components/comAnswerPop.vue";
import avtorGroup from "@/components/avtorGroup.vue";

import navHead from '@/components/navHead.vue';
const headData = reactive({
	color: '#fff',
	title: '问答详情'
})

const value = ref(4);
const value1 = ref("");

const replysId = ref(null)
let showReport = ref(false)
const replysName = ref('请输入回复内容')
const isMore = ref(false);
const detailInfo = ref({});
const product_info = ref({});
const user_info = ref({});

const show = ref(false);
const showpop = ref(false);
const title = ref("清除评论");
const content = ref("确定要删除该条评论吗？");
const deleteType = ref('')
const reportValue = ref('')


const selectedIndexes = ref([]);
const slectIdxVal = ref([])
const placeholderText = ref('请文明用语~')
function close() {
	// 关闭逻辑，设置 show 为 false  
	showpop.value = false;

	placeholderText.value = '请文明用语~'

}
function toggleSelection(item, index) {
	const indexOfIndex = selectedIndexes.value.indexOf(index);
	if (indexOfIndex > -1) {
		// 如果已经选中，撤销选中
		selectedIndexes.value.splice(indexOfIndex, 1);
		slectIdxVal.value.splice(indexOfIndex, 1);
	} else {
		// 如果没有选中，添加到选中列表
		selectedIndexes.value.push(index);
		slectIdxVal.value.push(item)

	}
}
const goBack = () => {
	uni.navigateBack(-1)
}

//删除评论
const confirm = () => {
	let _api = 'deleteReply'
	if (deleteType.value == 'answer') _api = 'deleteAnswer'
	show.value = false;
	utils
		.request(
			api[_api], {
			id: deleteId.value
		},
			"post"
		)
		.then((res) => {
			getEvaluateDetailData(replysId.value)
			getAnswerDetailFun(replysId.value)
			getReplyListFun(replysId.value)
			if (deleteType.value == 'answer') goBack()
		})
};
const cancel = () => {
	show.value = false;
	deleteType.value = ''
};

const showRoport = (item) => {
	if (item.isMore) {
		item.isMore = false
	} else {
		item.isMore = true
	}

}
// list 删除
const deleteFun = (id, type = '') => {
	deleteId.value = id
	show.value = true
	deleteType.value = type
}
// 列表举报open
const changeIsMore = (id, type) => {
	if (!utils.isLogin()) return utils.showLogModel()

	showReport.value = true;
	reportId.value = id;
	reportType.value = type
};
// 顶部举报open
const reportId = ref(null);
const reportType = ref('');
const goReport = (id, type) => {
	showReport.value = true;
	reportId.value = id;
	reportType.value = type
};

const closeReport = () => {
	showReport.value = false;
	reportValue.value = ''
	slectIdxVal.value = []
	selectedIndexes.value = [];
	slectIdxVal.value = [];
	isMore.value = false
	datas.value.forEach(item => item.isMore = false)
}


const goReply = (id) => {
	uni.navigateTo({
		url: `/subpackage/search/reply?id=${id}`,
	});
};


const addIsMoreProperty = (arr) => {
	for (let i = 0; i < arr.length; i++) {
		const obj = arr[i];
		// 给当前对象添加 isMore 属性
		obj.isMore = false;
		if (obj.children && Array.isArray(obj.children)) {
			// 如果有 children 数组，递归调用函数处理 children 数组
			addIsMoreProperty(obj.children);
		}
	}
	return arr;
}

const parentId = ref(null)


//回复接口
const onReplay = (val) => {
	utils
		.request(
			api.commentReply, {
			content: val,
			answer_id: replysId.value,
			// evaluate_id:detailInfo.value.id,
		},
			"post"
		)
		.then((res) => {
			// getEvaluateDetailData(replysId.value)
			uni.showToast({ title: '发布成功', icon: 'none' })
			getReplyListFun(replysId.value);

		})
	close()

}



const deleteId = ref(null)
const isDelete = (id) => {
	show.value = true;
	deleteId.value = id
}
const flags = ref(true)
const zanCount = ref(0)
const zanTime = ref('')
const maxTime = ref(30)
// 点赞
const handleZan = (id, islike, item) => {
	let time = (parseInt(Date.now()) - parseInt(zanTime.value)) / 1000
	if (time < maxTime.value && zanCount.value > 10) {
		uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
		return flags.value = false
	} else if (time > maxTime.value) {
		zanTime.value = ''
		flags.value = true
		zanCount.value = 0
	}
	if (!flags.value) return
	flags.value = !flags.value
	zanCount.value++
	if (!zanTime.value) zanTime.value = Date.now()
	if (islike === 0) {
		utils
			.request(
				api.like, {
				reply_id: id,
			},
				"post"
			)
			.then((res) => {
				// getEvaluateDetailData(replysId.value)
				// getReplyListFun(replysId.value)
				item.is_like = 1
				item.like_num++
				flags.value = !flags.value
			})
	} else {
		utils
			.request(
				api.cancelLike, {
				reply_id: id,
			},
				"post"
			)
			.then((res) => {
				// getEvaluateDetailData(replysId.value)
				// getReplyListFun(replysId.value)
				item.is_like = 0
				item.like_num--
				flags.value = !flags.value


			})
	}

}
// 底部点赞
const handleZan1 = (id, islike, item) => {
	let time = (parseInt(Date.now()) - parseInt(zanTime.value)) / 1000
	if (time < maxTime.value && zanCount.value > 10) {
		uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
		return flags.value = false
	} else if (time > maxTime.value) {
		zanTime.value = ''
		flags.value = true
		zanCount.value = 0
	}
	if (!flags.value) return
	flags.value = !flags.value
	zanCount.value++
	if (!zanTime.value) zanTime.value = Date.now()
	let _api = ['like', 'cancelLike']
	utils
		.request(
			api[_api[islike]], {
			answer_id: id,
		},
			"post"
		)
		.then((res) => {
			// getAnswerDetailFun(replysId.value)
			flags.value = !flags.value
			if (_api[islike] == 'like') {
				item.is_like = 1
				item.like_num++
			} else {
				item.is_like = 0
				item.like_num--

			}
		})
}

const inputRef = ref(null);
const openInput = (name, id) => {
	replysName.value = `回复 ${name} 的评论`;
	parentId.value = id;
}

const datas = ref([])
// 评论列表接口
const getReplyListFun = (id) => {
	let obj = {
		app_id: utils.app_id,
		identity: utils.identity,
		answer_id: id
	}
	utils
		.request(
			api.getReplyList, obj,
			"get"
		)
		.then((res) => {

			datas.value = res.data.items
			datas.value.forEach(item => {
				item.isMore = false
			})
			console.log(res, "datas.value>>>>>>>>>>>");
		});
};

const details = ref({})
// 问答详情接口
const getAnswerDetailFun = (id) => {
	utils
		.request(
			api.getAnswerDetail, {
			id: id,
			app_id: utils.app_id,
			identity: utils.identity,
		},
			"get"
		)
		.then((res) => {
			details.value = res.data.info
			console.log(res, "res.value>>>>>>>>>>>");
		});
};
const getEvaluateDetailData = (id) => {
	utils
		.request(
			api.getReplyDetail, {
			id: id,
		},
			"get"
		)
		.then((res) => {
			detailInfo.value = res.data.info || []
			parentId.value = detailInfo.value.id;
			product_info.value = res.data.info?.product_info;
			user_info.value = res.data.info.user_info;
			if (detailInfo.value.replys && detailInfo.value.replys.length > 0) {
				addIsMoreProperty(detailInfo.value.replys)
			}
			console.log(detailInfo.value, "detailInfo.value>>>>>>>>>>>");
		});
};

const change = () => {
	showpop.value = !showpop.value
}



onLoad((options) => {
	if (options.id) {
		replysId.value = options.id;
		getEvaluateDetailData(options.id);
		getAnswerDetailFun(options.id);
		getReplyListFun(options.id);
	}
});
</script>


<style lang="scss" scoped>
.page {
	height: 100vh;
}

.width {
	// width: calc(100% - 160rpx) !important;
	width: 100px;
	// background-color: red;
}

.reportBox {
	// width: 60%;
	height: 800rpx;
	border-radius: 40rpx;
	background: #f8f8f8;

	.list {
		height: 230rpx;
		background: #fff;
		border-radius: 20rpx;

		.item {
			background: #fff5f3;
			border-radius: 20rpx;
		}

		.active {
			background: #333333;
			color: #dbf046;
		}
	}
}

.btn {
	width: 690rpx;
	height: 78rpx;
	background: #333333;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.positionBox {
	//border: #d51010 solid 2rpx;
	position: relative;
	right: 10rpx;

	.box {
		position: absolute;
		// bottom: -42rpx;
		left: -40rpx;
		z-index: 22;
		width: 128rpx;
		// height: 128rpx;
		background: #fff;
		box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.user1 {
	background-color: #f8f8f8;

	.img {
		//border: 2rpx solid red;
		width: 68rpx;
		height: 68rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		flex-shrink: 0;
		position: relative;
	}

	.right {
		flex: 1;
	}
}

.user2 {
	height: 108rpx;
	background-color: #f8f8f8;
	overflow: hidden;
	position: relative;
	padding: 0 15rpx;


	.scroll-view_H {
		width: calc(100% - 160rpx);
	}

	.img_log {
		width: 68rpx;
		height: 68rpx;
		flex-shrink: 0;
		margin: 0 3rpx;

	}

	.likeNum_list {
		background-color: #f8f8f8;
		min-width: 160rpx;
		height: 100%;
		position: absolute;
		right: 0;
		box-shadow: -1rpx 0 20px #d3d3d3;
		/* 向左偏移10px，垂直偏移为0，模糊半径为10px，颜色为半透明的黑色 */

	}

}

.listBox {
	background: #f8f8f8;
	padding-top: 30rpx;

	.card1 {
		width: 690rpx;
		// height: 216rpx; 
		border-bottom: 2rpx solid #F1F1F1;
		// border-radius: 40rpx 40rpx 40rpx 40rpx;


	}
}

.nameTitle {
	display: inline-block;
	padding: 4rpx;
	background: #DBF046;
	border-radius: 8rpx;
	font-size: 20rpx;
	color: #333333;
	font-weight: 400;
}

.listBox .card1:last-child {
	border: none;
}

.asd {
	width: 690rpx;
	height: 108rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.caseBox {
	width: 690rpx;
	// height: 1384rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.combination {
		width: 172rpx;
		height: 54rpx;
		background: #ffffff;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
	}

	.line {
		width: 446rpx;
		height: 0rpx;
		border-bottom: 2rpx solid #f1f1f1;
	}

	.nextCase {
		width: 562rpx;
		// height: 530rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.casess {
			width: 160rpx;
			height: 54rpx;
			background: #f8f8f8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
}

.bottomCard {
	position: fixed;
	z-index: 99;
	bottom: 0rpx;
	//   border: #dbf046 2rpx solid;
	width: 750rpx;
	height: 166rpx;
	background: #f8f8f8;
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.comments {
		width: 750rpx;
		height: 98rpx;
		background: #f8f8f8;
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

		.input {
			width: 588rpx;
			height: 78rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #333333;
			display: flex;
			align-items: center;
			color: #666;
			font-size: 24rpx;
		}
	}
}
</style>